<template>
    <div class="cityList">
      <div class="cityList_buttons">
          现已开通 {{openCityNum}} 个城市  
          <Button type="primary" @click="cityAdd">新增城市</Button>
      </div>
      <Table ref="TableHeight" class="table" :max-height="onresizeHeight" :columns="columns1" :data="data1" @on-row-click="toEdit"></Table>
      <!-- 分页 -->
      <div class="pagePublicStyle" v-show="pageData.total > 0">
         <div class="totalCount">
             当前第 {{pageData.pages}} 页， 
             当前第 {{(pageData.pages-1)*pageData.rows+1}} 条到第 {{pageData.pages*pageData.rows>pageData.total?pageData.total:pageData.pages*pageData.rows}} 条，
             共 {{pageData.total}} 条
         </div>
        <Page :current="pageData.pages" :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" show-elevator show-sizer />
      </div>
      <!-- table 头部筛选 -->
      <!-- <table_filter :options="options" @cancelFilterFun="cancelFilterFun" @okFilterFun="okFilterFun"></table_filter> -->
      <!-- 审核弹窗 -->
      <Modal v-model="checkMoudle" title="新增城市" footer-hide width="600px">
        <div>
            <Form ref="formValidate" :model="formValidate" :label-width="100">
                <FormItem label="省/城市：" prop="provinceCode">
                  <Select
                     v-model="formValidate.provinceCode"
                     filterable
                     clearable
                     remote
                     placeholder="请选择省份"
                     style="width:200px;marginRight:10px"
                     @on-change="getAreacode(3,formValidate.provinceCode,'cityList')"
                   >
                  <Option v-for="(option, index) in provinceList" :value="option.cityCode"  :key="index">{{option.cityName}}</Option>
                </Select>
                <Select
                     v-model="formValidate.cityCode"
                     filterable
                     remote
                     placeholder="请选择城市"
                     style="width:200px"
                   >
                  <Option v-for="(option, index) in cityList" :value="option.cityCode" :key="index">{{option.cityName}}</Option>
                 </Select>
                </FormItem>
                 <FormItem label="开发平台：" prop="result">
                    <Checkbox v-model="formValidate.bappStatus">B-APP</Checkbox>
                    <Checkbox v-model="formValidate.cappStatus">C-APP</Checkbox>
                    <Checkbox v-model="formValidate.pcStatus">C-PC</Checkbox>
                    <Checkbox v-model="formValidate.mstationStatus">C-M站</Checkbox>
                    <Checkbox v-model="formValidate.wechatStatus">C-小程序</Checkbox>
                 </FormItem>
                <FormItem class="cityList_moudle_footer">
                    <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
                </FormItem>
            </Form>
        </div>
    </Modal>
    </div>
    
</template>
<script>
  import table_filter from '@/components/table_filter';
  import {getOnlineCityList,getOnlineCityAdd,getOnlineCityUpdate} from "@/api/cityConfig"
  import {getCityList} from '@/api/buildingCheckcenter'
  export default {
    components: {
      table_filter,
    },
    data() {
     const ruleValidateName = (rule, data, callback) =>{
        if(!data || data.length>15)return callback("请输入不超过15个字符长度的部门名称")
      callback()
    }
     return {
         openCityNum:0,
          onresizeHeight: 0,
          pageData: {
            total: 0,
            pages: 1,
            rows: 10,
            pageSizeOpts: [10, 30, 40, 50]
          },
         provinceList:[],
         cityList:[], 
          columns1: [
            {
              title: '城市',
              key: 'cityName',
              minWidth: 90,
              align: 'center',
            },
            {
              title: '开放平台',
              key: 'clientType',
              align: 'center',
              render: (h, params) => {
                return h('div',this.openPlatform(params.row)) 
              },
            },
            {
              title: '板块标签数量',
              key: 'tcount',
              align: 'center',
            },
            {
              title: '地铁数量',
              key: 'mcount',
              align: 'center',
            },
           {
             title: '更多',
             align: 'center',
              key:'tagsCount',
              minWidth:200,
           },
            {
              title: '操作',
              key: 'address',
              fixed: 'right',
              width: 100,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'text',
                    },
                    style: {
                      color: '#02b0f0'
                    },
                    on: {
                      click: () => {
                        this.toEdit(params.row)
                      }
                    }
                  }, '编辑')
               ]);
              },
            }
          ],
          data1: [],
          formValidate:{
            provinceCode:'',
            cityCode:'',
            bappStatus:false,
            cappStatus:false,
            pcStatus:false,
            wechatStatus:false,
            mstationStatus:false
          },
         propertyLogState:false,
         logData:{},
         checkMoudle:false
   }
  },
    methods: {
    //开始新建
    cityAdd(){
     this.formValidate = JSON.parse(JSON.stringify(this.initFrom));
     this.checkMoudle = true;
    },
    //点击新增城市按钮
     handleSubmit(name){
       let {provinceCode, cityCode,bappStatus,cappStatus,pcStatus,wechatStatus,mstationStatus} = this.formValidate;
       if(!provinceCode || !cityCode)return this.$Message.error("请选择省份和城市")
      let params = {
        provinceCode,cityCode,
        bappStatus:bappStatus?'1':'2',
        pcStatus:pcStatus?'1':'2',
        cappStatus:cappStatus?'1':'2',
        wechatStatus:wechatStatus?'1':'2',
        mstationStatus:mstationStatus?'1':'2',
      }
       getOnlineCityAdd(params).then(res=>{
          console.log("添加城市成功");
          this.$Message.success("添加城市成功");
          this.checkMoudle = false;
         this.$refs[name].resetFields();
         this.getList();
       }).catch(err=>{
          this.$Message.error("添加失败: 原因: "+err);
       })
       
     }, 
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        console.log('pageOnChangeFun', page)
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(page) {
        console.log('pageOnPageSizeChangeFun', page)
      },
      // 初始化获取数据
      initData() {
        this.$nextTick(() => {
          this.onresizeHeight = window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 100
        });
        this.getList();
        this.getAreacode(2,'','provinceList');
        this.initFrom = JSON.parse(JSON.stringify(this.formValidate));
        console.log(11, this.initFrom)
      },
     getList(){
       getOnlineCityList({level:3}).then(res=>{
         this.data1 = res.list;
         this.openCityNum = res.total;
         console.log("开发城市列表",res)
       })
     },
    //转变物业类型
    propertyTypeChange(mess){
      let list = mess.split(","),newArray=[];
      list.map(item=>{newArray.push(this.$formatter.switchName('propertyType',item))}) 
      return newArray.toString();
    },
    //循环平台
    openPlatform(mess){
      let openMess={
         bappStatus: 'B-APP',
         cappStatus: 'C-APP',
         mstationStatus:'C-M站',
         pcStatus: "C-PC",
         wechatStatus: 'C-小程序'
      },str = [];
      Object.keys(openMess).map(item=>{
        if(mess[item] == 1)str.push(openMess[item])
      });
      if(str.length>0)return str.join(",")
      else return '不开放';
    },
    //获取城市列表
    getAreacode(level=2,num,name){
       console.log("发生了请求",num)
         if(level !=2 && !num)return;
         //层级(1:国 2:省 3:市 4:区)
         let params = {level,parentCode:num,page:1,rows:100}
         getCityList(params).then(res=>{
          this[name] = res.list
          console.log('获取列表城市',res)
         })  
    },
    //关闭日志弹窗
    closePopup(){
       this.logData= {};
       this.propertyLogState = false;
     },
     //查看日志
     goLog(mess){
           this.logData= mess;
           this.propertyLogState = true;
     },
     //编辑
     toEdit(mess) {
         let {cityName,cityCode, onlineCityId, bappStatus,cappStatus,pcStatus,mstationStatus,wechatStatus,cityId} = mess,
         arr = [bappStatus,cappStatus,pcStatus,mstationStatus,wechatStatus],arr1=[];
         arr.map((item,index)=>item==1 && arr1.push(index));
        this.$router.push({
          path: '/operationsCenter/cityConfigurationDetail',
          query: {
            title: cityName,
            onlineCityId: onlineCityId,
            status: arr1.join("~"),
            code:cityCode,
            cityId
          }
        });
      },
      // 查看详情
      viewClick(val) {
         //this.editEmployee = true;
         //this.editEmployeeMess = val;
         this.$router.push({
             path:"/system_center/roleControl/roleControling",
             name: 'roleControling',
             params:{
               id:5
             }
         })
      },
      //编辑点击确定
      editEmployeeSure(name){
        this.$refs[name].validate((valid) => {
           if (valid) {
               console.log("成功")
               //调取变更部门接口
               //this.$refs[name].resetFields();
           } 
        })
      },
      //开启禁用人员确定按钮
      deleEmployeeSure(name){
         this.$refs[name].validate((valid) => {
           if (valid) {
               console.log("成功")
               this.deleEmployee = false;
               //调取变更部门接口
               //this.$refs[name].resetFields();
           } 
        }) 
      },
      //开启禁用人员
      openAuthority(mess){
          //调取权限接口
          console.log("调取权限接口")
      }
    },
    computed: {

    },
    created() {
      // 初始化获取数据
      console.log('测试111111')
      this.initData()
    },
    activated() {

    },
    deactivated() {

    },
    mounted() {
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight = window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 150
          }, 10);
        })();
      };
    },
    watch: {
      chengeNameStatus(newValue){
            console.log("chengeNameStatus",newValue)
           // newValue != 'checkWait' && this.getBuildingInfoList() && this.agianHeight()
        },
    },
  }
</script>
<style lang="scss">
  .cityList{
    height: calc(100% - 20px);
    padding: 20px;
    .allCustomersP{
      padding: 8px 14px;
    }
    &_moudle_select{
        width: 202px;
        margin-right: 10px;
    }
    &_moudle_footer{
      margin-right: 0px;
     text-align: right;  
    }
    &_buttons{
      text-align: left; 
      padding: 0px 0 20px 0;
    }
   /deep/.ivu-table-wrapper{
       height: 100%;
   }
   /deep/.ivu-table th{
       background-color: #f6f8fa;
   }
   /deep/.ivu-form-item{
     margin-bottom: 12px;  
   }
  }
  /* page */
  .pagePublicStyle{
    text-align: right;
    padding: 14px 0;
    margin-right: 30px;
  }
  .totalCount{
    float: left;
    line-height: 34px;
    padding-left: 20px;  
  }
 .table {
  .ivu-modal-header {
    border-bottom: 1px solid #e8eaec;
    padding: 14px 16px;
    line-height: 1;
  }
  th .ivu-table-cell-with-selection{
    position: relative;
  }
  th .ivu-table-cell-with-selection::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #f8f8f9;
    z-index: 99;
  }
  /deep/.ivu-checkbox-wrapper{
    margin-right: 20px;
    font-size: 16px
  }
}
</style>
